<template>
<div class="main-content">
  <div class="order-header">
    <h1>待评价订单</h1>
  </div>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ order['storeInfo']['name'] }}</span>
      </div>
      <div class="text item">
          <el-row class="product-item">
            <el-col :span="8" class="product-item-content">
              <img :src="that.$common.getResourceUrl(order['storeInfo']['storeInformation']['logoImage'])" class="product-image">
            </el-col>
            <el-col :span="8" class="product-item-content">{{ getOrderSummary(order['orderItems']) }}</el-col>
            <el-col :span="8" class="product-item-content">{{ order['createTime'] }}</el-col>
          </el-row>
      </div>
    </el-card>
  </div>
  <div :span="6" style="display: flex; align-items: center; margin: 16px 0">
    <span>评价订单：</span>
    <el-rate
      v-model="comment.rank"
      show-text>
    </el-rate>
  </div>
  <div>
    <el-input
      type="textarea"
      :rows="3"
      placeholder="说说您对本次订单的看法，帮助小伙伴选择"
      v-model="comment.message">
    </el-input>
  </div>
  <div style="margin: 22px 0; display: flex; justify-content: flex-end">
    <el-button type="primary" style="width: 220px;" @click="submitComment">提交评价</el-button>
  </div>
</div>
</template>

<script>
export default {
  name: 'OrderSubmission',
  props: {
    order: null
  },
  data () {
    return {
      that: this,
      comment: {
        userId: this.$store.state.currentUser.id,
        orderId: this.$props.order['id'],
        rank: 0,
        message: ''
      }
    }
  },
  methods: {
    submitComment () {
      this.$merchantAPI.comment_add(this.comment).then((params) => {
        this.$message({ type: 'success', message: '订单评价成功!' })
        this.$emit('success')
      })
    },
    getOrderSummary (orderItems) {
      let summary = '菜品: '
      orderItems.forEach((item) => {
        summary += item['productName'] + 'x' + item['productCount'] + ', '
      })
      return summary.substring(0, summary.lastIndexOf(','))
    }
  }
}
</script>

<style scoped>
  .main-content {
    padding: 0 20px;
    min-height: 500px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
  }
  .order-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .product-item {
    display: flex;
    align-items: center;
    color: #515151;
    font-size: 14px;
    letter-spacing: 2px;
  }
  .product-image {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    display: block;
  }
  .product-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-rate{
    align-items: center;
    padding: 10px 10px;
  }
  .el-button-submit{
    margin: 10px 10px;
  }
</style>
